<template>
	<view>

		<view class="select-group">
			<view class="select-parent">
				<view class="select-box card" @click="propClick()">
					<view class="select-tit">{{props[propCurrent].name}}</view>
					<u-icon name="arrow-down" color="#e5e7eb" size="30rpx"></u-icon>
				</view>
				<view class="select-child card" v-show="propShow">
					<view class="select-list" v-for="(item,index) in props" :key="index" @click="propCheck(item,index)">
						<view class="select-text">{{item.name}}</view>
					</view>
				</view>
			</view>
			<view class="select-parent">
				<view class="select-box card" @click="typeClick()">
					<view class="select-tit">{{type[typeCurrent].name}}</view>
					<u-icon name="arrow-down" color="#e5e7eb" size="30rpx"></u-icon>
				</view>
				<view class="select-child card" v-show="typeShow">
					<view class="select-list" v-for="(item,index) in type" :key="index" @click="typeCheck(item,index)">
						<view class="select-text">{{item.name}}</view>
					</view>
				</view>
			</view>
		</view>


		<scroll-view :scroll-top="scrollTop" :scroll-y="true" class="scroll" @scrolltolower="lower">
			<view class="trans-group">

				<!-- key要换 -->
				<view v-if="nodeList.length>0" class="trans-card card" v-for="(item,index) in nodeList" :key="index">
					<view class="trans-list">
						<view class="trans-left">
							<view class="trans-name">{{item.title}}</view>
							<view v-if="setInclud(item.content)"  class="trans-date">{{item.content}}</view>
							<view class="trans-date">{{item.createTime}}</view>
						</view>
						<view class="trans-right" :class="item.number<0?'del':'add'">
							{{ item.number >= 0 ? '+' + item.number : item.number }}
						</view>
					</view>
					<view class="trans-driver"></view>
				</view>
				<view v-if="nodeList.length==0" class="none">
					暂无信息
				</view>
			</view>
		</scroll-view>


	</view>
</template>

<script>
	import {
		couponInfo,
		issueCardList
	} from '@/api/my.js'
	export default {
		data() {
			return {
				scrollTop: 0,
				propCurrent: 0,
				typeCurrent: 0,
				propShow: false,
				typeShow: false,
				num: 100,
				props: [{
					name: '第一级飞机卡',
					id: 0
				}],
				type: [{
					name: '全部',
					id: 0
				}, {
					name: '增加',
					id: 1
				}, {
					name: '减少',
					id: 2
				}],
				nodeList: [],
				params: {
					pageNo: 1,
					pageSize: 20,
					status: 0, // 0=全部 1：增加 2：消耗
					vipCardId: 3, // 0=积分，1=能量
				},
				total: 0
			};
		},
		methods: {
			setInclud(str) {
				if (str.includes("转自") || str.includes("转给")) {
					return true
				}
				return false
			},
			lower() {
				if (this.nodeList.length < this.total) {
					this.params.pageNo++
					this.getList()
				}
			},
			async getList() {
				let list = await issueCardList()
				this.props = list.data.map(item => {
					return {
						name: item.vipName,
						id: item.id
					}
				})
				let res = await couponInfo(this.params)
				this.nodeList = [...this.nodeList, ...res.data.records]
				this.total = res.data.total
			},
			propClick() {
				this.propShow = !this.propShow
				this.typeShow = false
			},
			typeClick() {
				this.typeShow = !this.typeShow
				this.propShow = false
			},
			propCheck(item, index) {
				this.propCurrent = index
				this.params.vipCardId = item.id
				this.params.status = 0
				this.propShow = false
				this.typeCurrent = 0
				this.params.pageNo = 1
				this.nodeList = []
				this.getList()
			},
			typeCheck(item, index) {
				this.typeCurrent = index
				this.params.status = item.id
				this.typeShow = false
				this.params.pageNo = 1
				this.nodeList = []
				this.getList()
			},


		}
	}
</script>

<style lang="scss" scoped>
	.none {
		width: 100%;
		height: 120rpx;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.scroll {
		height: calc(100vh - 450rpx);
		overflow: hidden;
		margin-top: 20rpx;
	}

	.trans-group {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	.trans-card {
		padding: 30rpx;
		transition: background-color 0.2s ease;
	}

	.trans-list {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.trans-left {
		display: flex;
		flex-direction: column;
		gap: 10rpx;
	}

	.trans-name {
		font-size: 28rpx;
		font-weight: 400;
		line-height: 1;
		color: #e2e8f0;
	}

	.trans-date {
		font-size: 24rpx;
		font-weight: 400;
		line-height: 1;
		color: #94a3b8;
	}

	.trans-right {
		font-size: 32rpx;
		font-weight: 600;
		line-height: 1;
		color: #94a3b8;
	}

	.trans-driver {
		margin-top: 20rpx;
		width: 100%;
		height: 2rpx;
		background-color: rgba(255, 255, 255, 0.1);
	}

	.add {
		color: #00ff9d;
	}

	.del {
		color: #ff3e3e;
	}

	.select-group {
		display: flex;
		align-items: center;
		width: 100%;
		gap: 20rpx;
	}

	.select-parent {
		position: relative;
		flex: 1;
	}

	.select-child {
		border-radius: 10rpx;
		top: 100%;
		right: 0;
		margin-top: 10rpx;
		position: absolute;
		width: 70%;
		z-index: 2;
		padding: 5rpx 0;
	}

	.select-list {
		padding: 15rpx 20rpx;
	}

	.select-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx 30rpx;
	}

	.select-tit {
		font-size: 32rpx;
		font-weight: 500;
		line-height: 1;
		color: #e5e7eb;
	}

	.select-text {
		font-size: 28rpx;
		font-weight: 500;
		line-height: 1;
		color: #e5e7eb;
	}
</style>